<template>
  <div>
    <div class="allcatin_top">
      <el-button type="success" @click="addtable">添加表格</el-button>
      <el-button type="success" @click="savetable">保存数据</el-button>
    </div>

    <div class="allcatin_hader">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="headClass"
        @cell-dblclick="edit"
        :cell-style="cellStyleFun"
      >
        <el-table-column label="id" prop="id" style="text-align: center">
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.id"
                @blur="blurid(scope.row.userId, scope.row.id)"
                size="mini"
              ></el-input>
              <span v-else>{{ scope.row.id }}</span>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column
          label="shortname"
          prop="shortname"
          style="text-align: center"
        >
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.shortname"
                @blur="bluridshortname(scope.row.userId, scope.row.shortname)"
                size="mini"
              ></el-input>
              <span v-else>{{ scope.row.shortname }}</span>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column label="origin" prop="size_origin">
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-select
                v-model="scope.row.size_origin"
                placeholder=""
                v-if="scope.row.isEdit"
                size="mini"
              >
                <el-option label="LT" value="LT"></el-option>
                <el-option label="LB" value="LB"></el-option>
                <el-option label="RT" value="RT"></el-option>
                <el-option label="RB" value="RB"></el-option>
              </el-select>
              <span v-else>{{ scope.row.size_origin }}</span>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column label="size_x" prop="size_x">
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.size_x"
                @blur="size_x(scope.row.userId, scope.row.size_x)"
                size="mini"
              ></el-input>
              <span v-else>{{ scope.row.size_x }}</span>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column label="size_y" prop="size_y">
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.size_y"
                @blur="size_y(scope.row.userId, scope.row.size_y)"
                size="mini"
              ></el-input>
              <span v-else>{{ scope.row.size_y }}</span>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              :loading="scope.row.isLoading"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tablelist: [],
      tableData: [],
    };
  },
  mounted() {
    this.gettablelist();
  },
  methods: {
    gettablelist() {
      this.ajax.get("func/1023/selProduct").then((res) => {
        res.data.forEach((ele) => {
          this.$set(ele, "isEdit", false);
          this.$set(ele, "isAbnormal", false);
        });
        // console.log(res.data);
        this.tableData = res.data;
      });
    },

    edit(row) {
      if (row.isEdit) return;
      row.isEdit = !row.isEdit;
    },

    addtable() {
      var item = {
        id: "",
        isAbnormal: false,
        shortname: "",
        isEdit: false,
        size_origin: null,
        size_x: null,
        size_y: null,
      };
      // var obj = {
      //   id: this.tableData[0].id,
      //   isAbnormal: this.tableData[0].isAbnormal,
      //   shortname:this.tablelist[0].shortname,
      //   isEdit: this.tableData[0].isEdit,
      //   size_origin: this.tableData[0].size_origin,
      //   size_x: this.tableData[0].size_x,
      //   size_y: this.tableData[0].size_y,
      // };
      this.tableData.unshift(item);
    },

    savetable() {
      let ary = [];
      this.tableData.forEach((item) => {
        let obj = {
          id: item.id,
          isAbnormal: item.isAbnormal,
          shortname: item.shortname,
          isEdit: item.isEdit,
          size_origin: item.size_origin,
          size_x: item.size_x,
          size_y: item.size_y,
        };
        ary.push(obj);
      });
      for (let i = 0; i < ary.length - 1; i++) {
        // console.log(ary.length)
        if (ary[i].id == ary[i + ary.length - 1].id) {
          this.$alert(ary[i].id, "id不能相同", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$message({
                type: "info",
                message: `action: ${action}`,
              });
            },
          });
          return;
        } else if (ary[i].id == "") {
          this.$alert(ary[i].id, "id不能为空", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$message({
                type: "info",
                message: `action: ${action}`,
              });
            },
          });
          return;
        } else if (ary[i].shortname == "") {
          this.$alert(ary[i].shortname, "shortname不能为空", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$message({
                type: "info",
                message: `action: ${action}`,
              });
            },
          });
          return;
        } else if (ary[i].size_origin == "") {
          this.$alert(ary[i].size_origin, "size_origin不能为空", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$message({
                type: "info",
                message: `action: ${action}`,
              });
            },
          });
          return;
        } else if (ary[i].size_x == "") {
          this.$alert(ary[i].size_x, "size_x不能为空", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$message({
                type: "info",
                message: `action: ${action}`,
              });
            },
          });
          return;
        } else if (ary[i].size_y == "") {
          this.$alert(ary[i].size_y, "size_y不能为空", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$message({
                type: "info",
                message: `action: ${action}`,
              });
            },
          });
          return;
        } else {
          this.ajax({
            method: "POST",
            url: "func/1023/updateProduct?",
            data: ary,
          }).then((res) => {
            // console.log(res.data)
            if (res.data.code == 2000) {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.gettablelist();
            }else {
                this.$alert(res.data.text, "id不能相同", {
                   confirmButtonText: "确定",
                      callback: (action) => {
                        this.$message({
                          type: "info",
                          message: `action: ${action}`,
                        });
                      },
                 });
              }
          });
          return
        }
      }
    },

    // 表头样式设置
    headClass() {
      return "text-align: center;background:#696969;color:#fff;text-align:center";
    },
    size_x(item, id) {
      if (id == "") {
        this.$alert("size_x不能为空", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
      var reg = new RegExp(/[^\d]/g, "");
      if (reg.test(id)) {
        this.$alert("请正确输入数字", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
    },

    size_y(item, id) {
      // console.log('22222222222222',item,id)
      if (id == "") {
        this.$alert("size_y不能为空", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
      var reg = new RegExp(/[^\d]/g, "");
      //  console.log(reg)
      if (reg.test(id)) {
        this.$alert("请正确输入数字", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
    },

    blurid(item, id) {
      //  console.log('22222222222222',item,id);
      if (id == "") {
        this.$alert("id不能为空", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
    },

    bluridshortname(item, id) {
      if (id == "") {
        this.$alert("shortname不能为空", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
    },
    // thStyleFun() {
    //  return 'text-align:center'
    // },
    cellStyleFun() {
      return "text-align:center";
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      row.isLoading = true;
      this.$confirm("此操作将进行删除操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          setTimeout(function () {
            row.isLoading = false;
          }, 1500);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          row.isLoading = false;
        });
      console.log(index, row);
      console.log(this.tableData.length);
    },
  },
};
</script>

<style  scoped>
.allcation_cont {
  width: 100%;
}
.allcatin_top {
  width: 100%;
  /* border:1px solid #000; */
  display: flex;
  background: #ffffff;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-top: 5px;
  /* padding-right:-10px; */
}
.allcatin_hader {
  margin-top: 30px;
}
</style>